<template>
  <section class="impact-situation-page">
    <div class="screen-container">
      <TimeRadio
          v-model="datePickerValue"
          defaultTimeRadioValue="1m"
          @change="datePickerChange"
          :timeRadioValues="[
        { label: '近1天', value: '0d' },
        { label: '近7天', value: '6d' },
        { label: '近30天', value: '1m' },
      ]"
          format="YYYY-MM-DD"
      >
      </TimeRadio>
      <div class="show-import">
        <el-tooltip
            class="item"
            effect="dark"
            content="命中成功事件的企业"
            placement="top"
        >
          <el-checkbox
              v-model="warnLevel"
              @change="datePickerChange"
          >只看高危企业<span class="el-icon-question" style="margin-left: 10px"></span
          ></el-checkbox>
        </el-tooltip>
      </div>
    </div>
    <BlockTitle title="影响目标情况"/>
    <div class="goal-container">
      <ul class="type-area">
        <li class="organize">
          <img class="image" src="./assets/img1.png" alt="">
          <div class="info">
            <div class="num">{{ viewTypeData.assetSegmentNum }}</div>
            <div class="text">影响资产数量</div>
          </div>
        </li>
        <li class="ip">
          <img class="image" src="./assets/img2.png" alt="">
          <div class="info">
            <div class="num">{{ viewTypeData.targetIpNum }}</div>
            <div class="text">影响IP数量</div>
          </div>
        </li>
        <li class="domain">
          <img class="image" src="./assets/img2.png" alt="">
          <div class="info">
            <div class="num">{{ viewTypeData.targetPortNum }}</div>
            <div class="text">影响暴露面数量</div>
          </div>
        </li>
      </ul>
      <EventLine ref="eventLine" :date-picker-value="propDateValue" :view-type="viewType"
                 :warn-level="warnLevel"/>
      <EventRankArea ref="eventRankArea" :date-picker-value="propDateValue" :view-type="viewType"
                     :warn-level="warnLevel"/>
      <EventPie ref="eventPie" :date-picker-value="propDateValue" :view-type="viewType"
                :warn-level="warnLevel"/>
    </div>
    <BlockTitle title="受影响单位"/>
    <SearchArea ref="searchArea" :date-picker-value="propDateValue" :warn-level="warnLevel"/>
  </section>
</template>

<script>
import {formatTimeByMoment} from "@/utils/time.js";
import {numConvert} from '@/utils/pe_util.js'
import BlockTitle from '@/components/BlockTitle.vue';
import TimeRadio from '@/components/TimeRadio.vue';
import EventLine from './components/EventLine.vue';
import EventRankArea from './components/EventRankArea.vue';
import EventPie from './components/EventPie.vue';
import SearchArea from './components/SearchArea.vue'


export default {
  name: "ImpactSituationPage",
  components: {
    BlockTitle,
    TimeRadio,
    EventLine,
    EventRankArea,
    EventPie,
    SearchArea
  },
  data() {
    return {
      // 时间
      datePickerValue: [],
      //props时间
      propDateValue: [],
      // 高危资产
      warnLevel: false,
      // 默认是影响资产数量 也就是viewType = 1
      viewType: 1,
      viewTypeData: {
        assetSegmentNum: 0, // 资产数量
        targetIpNum: 0, // IP
        targetPortNum: 0, // 暴露面
      }
    }
  },
  methods: {
    datePickerChange() {
      this.propDateValue[0] = formatTimeByMoment(this.datePickerValue[0], 'YYYYMMDD');
      this.propDateValue[1] = formatTimeByMoment(this.datePickerValue[1], 'YYYYMMDD');
      this.getViewData();
      this.getCardData();
    },
    getViewData() {
      new Promise((resolve) => {
        resolve(true)
      }).then(() => {
        this.viewTypeData = {
          assetSegmentNum: numConvert(190 + Math.floor(Math.random() * 20)),
          targetIpNum: numConvert(100 + Math.floor(Math.random() * 20)),
          targetPortNum: numConvert(45 + Math.floor(Math.random() * 20)),
        }
      })
    },
    // 获取各类卡片数据
    getCardData() {
      new Promise((resolve) => {
        resolve(true)
      }).then(() => {
        this.$refs.eventLine.initComp();
        this.$refs.eventRankArea.initComp();
        this.$refs.eventPie.initComp();
        this.$refs.searchArea.initComp();
      })
    }
  }
}
</script>


<style scoped lang="scss">
.impact-situation-page {
  .screen-container {
    display: flex;
    align-items: center;

    .show-import {
      margin-left: 70px;
      padding: 6px 10px;
      border: 1px solid #e2e2e2;
      border-radius: 6px;
    }
  }

  .goal-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .type-area {
      flex: 0 0 280px;

      > li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        padding: 10px 20px;
        background: #dfe3fa;
        border-radius: 24px 0 24px 0;

        .image {
          flex: 0 0 45px;
          width: 45px;
          height: 45px;
          margin-right: 20px;
        }

        .info {
          flex: 1;
          font-weight: bold;

          .num {
            font-size: 26px;
            color: #000;
            margin-bottom: 10px;
          }

          .text {
            font-size: 16px;
            color: rgb(128, 129, 145);
          }
        }

        &.organize {
          height: 100px;
          border: 1px solid #e1e3ed;
          padding: 15px 20px;
          border-radius: 8px;
          background: none;

          .image {
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
          }

          .num {
            color: rgb(245, 158, 59);
          }

          &.view-active {
            background: rgb(237, 120, 84);
            border: none;
          }
        }

        &.ip {
          margin: 20px 0;
        }

      }
    }
  }
}
</style>